<template>
	<view class="tag" :style="{ '--colorPrimary': color.primary }">
		<b-layout-index>
				<theme-color-bg type="c3">
				<view class="pd-top-30 oval header">
					<!-- 	<image class="mg-top-10" mode="aspectFit" src="../../static/image/login.png"></image> -->
					<view class="text-center">
						<view style="width: 60px;height: 60px; margin: 0 auto;">
							<u-avatar :size="60" :src="authInfo.avatar"></u-avatar>
						</view>
						<view class="mg-top-10"><text class="font-size-18">{{authInfo.name}}</text></view>
					</view>

					<view class="text-center mg-top-10">

						<u-grid :border="false" col="2">
							<u-grid-item>
								<text class="font-size-14">{{authInfo.agentName?authInfo.agentName:''}} </text>
								<text class="font-size-10">{{$t('级别')}}</text>
							</u-grid-item>
							<u-grid-item>
								<text class="font-size-14">{{authInfo.invite?authInfo.invite:''}}</text>
								<text class="font-size-10">{{$t('邀请编码')}}</text>
							</u-grid-item>
						</u-grid>

					</view>

				</view>
			</theme-color-bg>
			<view class="coverfill br-rd-top-30 ">
				<view class="pd-30">
					<view class="title   font-size-24  font-bold">{{$t('注册中心')}} </view>
					<view>
						<u--form :borderBottom="false" :model="param" :rules="rules" ref="form1">
							<u-form-item prop="name">
								<view class="mg-top-10">
									<view class="input br-rd-6">
										<u-cell :border="false">
											<iconfont slot="icon" :color="color.primary" icon="icon-wode" />

											<u--input slot="title" class="pd-left-10 pd-right-10" :placeholder="$t('请输入你的中文名字')"
												v-model="param.name" border="none"></u--input>
										</u-cell>
									</view>
								</view>
							</u-form-item>
							<u-form-item prop="nameUg">
								<view>
									<view class="input br-rd-6">
										<u-cell :border="false">
											<iconfont slot="icon"  :color="color.primary"  icon="icon-wode" />
											<u--input slot="title" class="pd-left-10 pd-right-10" :placeholder="$t('请输入你的维吾尔名字')"
												v-model="param.nameUg" border="none"></u--input>
										</u-cell>
									</view>
								</view>
							</u-form-item>
							<!-- <u-form-item prop="idcard">
								<view class="mg-top-10">
									<view class="input br-rd-6">
										<u-cell :border="false">
											<iconfont slot="icon"  :color="color.primary"  icon="icon-shinshopgerenxinxi" />

											<u--input slot="title" class="pd-left-10 pd-right-10" :placeholder="$t('请输入身份证号')"
												v-model="param.idcard" border="none"></u--input>
										</u-cell>
									</view>
								</view>
							</u-form-item> -->
							<u-form-item prop="phone">
								<view>
									<view class="input br-rd-6">
										<u-cell :border="false">
											<iconfont slot="icon"  :color="color.primary"  icon="icon-shouji" />

											<u--input slot="title" class="pd-left-10 pd-right-10" :placeholder="$t('请输入手机号')"
												v-model="param.phone" border="none"></u--input>
										</u-cell>
									</view>
								</view>
							</u-form-item>
						<!-- 	<u-form-item prop="wechat">
								<view>
									<view class="input br-rd-6">
										<u-cell :border="false">
											<iconfont slot="icon"  :color="color.primary"  icon="icon-weixin1" />

											<u--input slot="title" class="pd-left-10 pd-right-10" :placeholder="$t('请输入微信号')"
												v-model="param.wechat" border="none"></u--input>
										</u-cell>
									</view>
								</view>
							</u-form-item> -->
							<u-form-item prop="password">
								<view>
									<view class="input br-rd-6">
										<u-cell :border="false">
											<iconfont slot="icon"  :color="color.primary"  icon="icon-mima1" />

											<u--input  type="password" slot="title" class="pd-left-10 pd-right-10" :placeholder="$t('请输入新密码')"
												v-model="param.password" border="none"></u--input>
										</u-cell>
									</view>
								</view>
							</u-form-item>
							<u-form-item prop="repassword">
								<view>
									<view class="input br-rd-6">
										<u-cell :border="false">
											<iconfont slot="icon"  :color="color.primary"  icon="icon-mima1" />
											<!-- 	<input :value="param.password" slot="title" type="password"
												placeholder="请输入密码" class="pd-left-10 pd-right-10" /> -->
											<u--input type="password" slot="title" class="pd-left-10 pd-right-10"
												:placeholder="$t('请输入确认密码')" v-model="param.repassword" border="none">
											</u--input>
										</u-cell>
									</view>
								</view>
							</u-form-item>
							<u-form-item prop="flag">

								<u-checkbox labelSize="12" :label="$t('同意')"></u-checkbox>

							</u-form-item>



							<view class="mg-top-20">

								<u-button @click="login()"  :color="color.primary"  customStyle="border-radius:6px" type="primary"
									:plain="true" :text="$t('注册')">
								</u-button>

							</view>

						</u--form>


					</view>
				</view>


			</view>
		</b-layout-index>
	</view>
</template>

<script>
	import {
		login,
		loginAccount,
		byPhone,
		byIdCard,
		regesterLogin
	} from '../../api/oauth.js'
	import {
		getAuthByInfo
	} from '../../api/user.js'

	export default {
		data() {
			return {
				authInfo: {
					id: 0
				},
				param: {
					idcard: "",
					name: "",
					nameUg: "",
					password: "",
					phone: "",
					repassword: "",
					wechat: ""

				},
				rules: {
					'name': [{
						type: 'string',
						required: true,
						message: this.$t('请输入你的中文名字'),
						trigger: ['blur', 'change']
					}, {
						pattern: /^[\u4e00-\u9fa5·]*$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: this.$t('你的中文名字不对'),
						trigger: ['blur', 'change']
					}],
					"nameUg": [{
						required: true,
						message: this.$t('请输入你的维吾尔名字'),
						trigger: ['blur'],
					}],

					// 字段名称
					"phone": [{
							required: true,
							message: this.$t('请输入手机号'),
							trigger: ['blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: this.$t('手机号码不正确'),
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						},
						// 校验用户是否已存在
						{
							required: true,
							asyncValidator: (rule, value, callback) => {
								console.log("手机号", value)
								if (value != "") {
									byPhone(value).then(res => {
										console.log(res)
										callback();
									}).catch(e => {
										console.log("Error", e)
										callback(new Error('手机号已存在'));

									})
								} else {
									callback();
								}
							},
							// 如果是异步校验，无需写message属性，错误的信息通过Error抛出即可
							message: '手机号已存在',
							trigger: ['blur']
						}
					],
				
					"wechat": [{
						required: true,
						message: this.$t('请输入微信号'),
						trigger: ['blur']
					}],

					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 20,
							message: '长度在 6 到 20 个字符',
							trigger: 'blur'
						},
						{
							validator: validatePass,
							trigger: 'blur'
						}
					],
					repassword: [{
							required: true,
							message: '请确认密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 20,
							message: '长度在 6 到 20 个字符',
							trigger: 'blur'
						},
						{
							validator: validatePass2,
							trigger: 'blur',
							required: true
						}
					]

				},
			}
		},
		onLoad: function({
			type = 12,
			userId = 0
		}) {
			if (userId > 0) {
				uni.setStorageSync("parentUserId", userId)
				this.getAuthInfo(userId)
			}
		},
		onReady() {
				//onReady 为uni-app支持的生命周期之一
		    	this.$refs.form.setRules(this.rules)
		},
		methods: {
			getAuthInfo: function(userId = 0) {
				var the = this;
				getAuthByInfo(userId).then(res => {
					the.authInfo = res;
				})
			},
			login: function(e) {
				var the = this
				console.log("Login")
				//	this.$refs.form1.setRules(this.rules);
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				//prevPage.$vm.detailList.receive = item; //修改上一页data里面的地址
				console.log("pages", nowPage, prevPage)
				this.$refs.form1.validate().then(res => {
					uni.$u.toast('校验通过')
					// 获取用户信息
					uni.getUserProfile({
						provider: "weixin",
						lang: 'zh_CN',
						desc: "确认才能正常试用有些功能",
						success: function(infoRes) {
							var userinfo = infoRes.userInfo;
							the.userInfo = userinfo;
							var paramUser = the.param;
									paramUser['parentUserId'] = the.authInfo.id
							var param = {
								encryptedData: infoRes.encryptedData,
								iv: infoRes.iv
							};
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									var code = loginRes.code;
									param['code'] = code
									console.log(param);
									var a = regesterLogin(param, paramUser)
									a.then(res => {
										uni.removeStorageSync("parentUserId")
										uni.setStorageSync("userInfo", res)
										uni.setStorageSync("Authorization", res
											.token)

										uni.redirectTo({
											url: "/page/workbench/pages/agent/upgrade?isReg=true"
										})
									})
								}
							})
						}
					});


				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('校验失败')
				})

			},
			loginSubmitAccond: function() {
				var the = this;
				var param = this.param;
				param['parentUserId'] = this.authInfo.id
				this.$refs.form1.validate().then(res => {
					uni.$u.toast('校验通过')
					console.log(param)

				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('校验失败')
				})
			}
		}
	}

	var validatePass = (rule, value, callback) => {
		if (value === '') {
			callback(new Error('请输入密码'));
		} else {
			callback();
		}
	};
	var validatePass2 = (rule, value, callback) => {
		if (value === '') {
			callback(new Error('请再次输入密码'));
		} else if (value !== this.model2.password) {
			callback(new Error('两次输入密码不一致!'));
		} else {
			callback();
		}
	};
</script>

<style>
	.header {
	
		height: 200px;
		color: #FFFFFF;
	}

	.tag {
		background-color: #FFFFFF !important;
		height: 100%;
	}

	page {
		background-color: #FFFFFF !important;
	}

	.coverfill {
		background-color: #FFFFFF;
		margin-top: -40px;
		min-height: 200px;
		z-index: 300;
		position: absolute;
		width: 100%;
		top: 250px;
		left: 0;
		height: 67%;
	}

	.br-rd-top-30 {
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
	}

	.title {
		color: var(--color-primary);
	}

	.input {
		background-color: #3c9cff0f;
	}
</style>
